<!--  -->
<template>
  <div class='content'>
    <div id="boxFixed" :class="{'is_fixed' : isFixed}">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item v-for="(item,index) in navList" :key="index" :index="item.id">{{item.title}}</el-menu-item>
      </el-menu>
    </div>

    <div style="margin-top:20px;" class="row-content">
      <el-card>
        <div slot="header" class="clearfix">
          <i class="el-icon-search"></i>
          <span>合同地址</span>
          <span v-if="JSON.stringify(formData)!='{}'" style="position:absolute;left:50%;color: #2a7af7;font-size: 30px;">合同租金:{{formData.manage[12].value}}(元/月)</span>
        </div>
        <div v-for="(item,index) in addressList" :key="index">
          {{item}}
        </div>
      </el-card>
    </div>
    <div style="margin-top:20px;">
      <el-row :id="'anchor-'+item.id" v-for="(item,index) in navList" :key="index" class="row-content">
        <el-card>
          <div slot="header" class="clearfix">
            <i class="el-icon-search"></i>
            <span>{{item.title}}</span>
          </div>
          <div v-if="item.id==='1'">
            <el-form ref="form" label-position="left" label-width="100px">
              <el-row>
                <div v-for="(item,i) in formData.manage" :key="i">
                  <el-col v-if="i==30||i==31" :span="24">
                    <el-form-item :label="item.name">
                      <span v-if="typeof(item.value)==='object'&&item.value!=null">{{item.value.time|parseTime}}</span>
                      <span v-else>{{item.value}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col v-else-if="item.value==''||item.value==null" :span="8">
                    <el-form-item :label="item.name">
                      <span>—</span>
                    </el-form-item>
                  </el-col>
                  <el-col v-else :span="8">
                    <el-form-item :label="item.name">
                      <span v-if="typeof(item.value)==='object'&&item.value!=null">{{item.value.time|parseTime}}</span>
                      <span v-else>{{item.value}}</span>
                    </el-form-item>
                  </el-col>
                </div>
              </el-row>
            </el-form>
          </div>
          <div v-if="item.id==='2'">
            <l-table :loading="nonpayment.loading" :tablePage="nonpayment.tablePage" :tableColumn="nonpayment.tableColumn" :tableData="nonpayment.tableData" @getPage="getPage"></l-table>
          </div>
          <div v-if="item.id==='3'">
            <l-table :loading="deducted.loading" :tablePage="deducted.tablePage" :tableColumn="deducted.tableColumn" :tableData="deducted.tableData" @getPage="getPage1"></l-table>
          </div>
          <div v-if="item.id==='4'">
            <l-table :loading="payment.loading" :tablePage="payment.tablePage" :tableColumn="payment.tableColumn" :tableData="payment.tableData" @getPage="getPage2"></l-table>
          </div>
          <div v-if="item.id==='5'">
            <l-table :loading="marginPay.loading" :tablePage="marginPay.tablePage" :tableColumn="marginPay.tableColumn" :tableData="marginPay.tableData" @getPage="getPage3"></l-table>
          </div>
        </el-card>
      </el-row>
    </div>
    <template>
      <el-backtop target=".wrapper">
        <div class="back-ball">
          UP
        </div>
      </el-backtop>
    </template>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  getChartDetails,
  getNonpayment,
  getDeducted,
  getPayment,
  getReturnAddress,
  getMarginPay
} from "@/api/table";
import { parseTime } from "@/utils/index";
import { getTableColumn } from "@/utils/baseData";
import LTable from "../components/LTable";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { LTable },
  filters: {
    parseTime
  },
  data() {
    //这里存放数据
    return {
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      activeIndex: "1",
      fit: "fill",
      isFixed: false,
      navList: [
        { id: "1", title: "经营信息" },
        { id: "2", title: "租金未交" },
        { id: "3", title: "租金已交" },
        { id: "4", title: "交租记录" },
        { id: "5", title: " 保证金交纳" }
      ],
      tableToolbar: {
        refresh: true,
        setting: true
      },
      nonpayment: {
        tableData: [],
        tableColumn: [],
        loading: false,
        tablePage: {
          total: 0,
          pageIndex: 1,
          pageSize: 10
        }
      },
      deducted: {
        loading: false,
        tableData: [],
        tableColumn: [],
        tablePage: {
          total: 0,
          pageIndex: 1,
          pageSize: 10
        }
      },
      payment: {
        loading: false,
        tableData: [],
        tableColumn: [],
        tablePage: {
          total: 0,
          pageIndex: 1,
          pageSize: 10
        }
      },
      marginPay: {
        loading: false,
        tableData: [],
        tableColumn: [],
        tablePage: {
          total: 0,
          pageIndex: 1,
          pageSize: 10
        }
      },
      loading: false,
      chartGuid: this.$route.query.chartGuid,
      formData: {},
      addressList: []
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initConData() {
      this.nonpayment.tablePage.chartGuid = this.chartGuid;
      let data = this.nonpayment.tablePage;
      getNonpayment(data).then(res => {
        this.nonpayment.tableData = res.data;
        this.nonpayment.tablePage.total = res.allCount;
        this.nonpayment.tableColumn = getTableColumn("nonpayment");
      });
    },
    initdeducted() {
      this.deducted.tablePage.chartGuid = this.chartGuid;
      let data = this.deducted.tablePage;
      getDeducted(data).then(res => {
        this.deducted.tableData = res.data;
        this.deducted.tablePage.total = res.allCount;
        this.deducted.tableColumn = getTableColumn("deducted");
      });
    },
    initpayment() {
      this.payment.tablePage.chartGuid = this.chartGuid;
      let data = this.payment.tablePage;
      getPayment(data).then(res => {
        this.payment.tableData = res.data;
        this.payment.tablePage.total = res.allCount;
        this.payment.tableColumn = getTableColumn("payment");
      });
    },
    initmarginPay() {
      this.marginPay.tablePage.chartGuid = this.chartGuid;
      let data = this.marginPay.tablePage;
      getMarginPay(data).then(res => {
        this.marginPay.tableData = res.data;
        this.marginPay.tablePage.total = res.allCount;
        this.marginPay.tableColumn = getTableColumn("marginPay");
      });
    },
    handleSelect(index) {
      console.log("选中菜单 ", index);
      this.$el.querySelector("#anchor-" + index).scrollIntoView();
      // var anchor = this.$el.querySelector("#anchor-" + index);
      // document.documentElement.scrollTop = anchor.offsetTop;
    },
    getPage({ page, limit }) {
      this.nonpayment.tablePage.pageIndex = page;
      this.nonpayment.tablePage.pageSize = limit;
      this.initConData();
    },
    getPage1({ page, limit }) {
      this.deducted.tablePage.pageIndex = page;
      this.deducted.tablePage.pageSize = limit;
      this.initdeducted();
    },
    getPage2({ page, limit }) {
      this.payment.tablePage.pageIndex = page;
      this.payment.tablePage.pageSize = limit;
      this.initpayment();
    },
    getPage3({ page, limit }) {
      this.marginPay.tablePage.pageIndex = page;
      this.marginPay.tablePage.pageSize = limit;
      this.initmarginPay();
    },
    initHeight() {
      // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
      var scrollTop = this.$root.$el.scrollTop;
      console.log("scroll", scrollTop);
      //如果被卷曲的高度大于吸顶元素到顶端位置 的距离
      this.isFixed = scrollTop > this.offsetTop ? true : false;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      this.$root.$el.addEventListener("scroll", this.initHeight, true);
      //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
      this.offsetTop = document.querySelector("#boxFixed").offsetTop;
      console.log("offsetTop", document.querySelector("#boxFixed").offsetTop);
    });
    let data = { chartGuid: this.chartGuid };
    getChartDetails(data).then(res => {
      this.formData = res;
    });
    getReturnAddress({ chartGuid: this.chartGuid }).then(res => {
      this.addressList = res;
    });
    this.initConData();
    this.initdeducted();
    this.initpayment();
    this.initmarginPay();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
/deep/ th .vxe-cell {
  text-align: center;
}
.content {
  margin: 20px;
  padding: 20px;
  .img {
    // height: 100%;
    border-radius: 5px;
  }
  .info {
    text-align: center;
    .p_title {
      font-size: 36px;
      color: #2a7af7;
    }
    .p_number {
      color: #2a7af7;
      font-size: 60px;
      margin-bottom: 10px;
      .p_number2 {
        color: rgb(0, 0, 0);
        font-size: 18px;
      }
      span {
        font-size: 36px;
      }
    }
    .p_small {
      margin-top: 20px;
      font-size: 14px;
      color: #999999;
    }
  }

  .title1 {
    margin-left: 20px;
    span {
      font-size: 18px;
      margin-bottom: 20px;
      display: block;
    }
  }
  .el-menu-demo {
    box-shadow: 1px 4px 12px 1px #9aaddc61 !important;
  }
  .row-content {
    margin-bottom: 20px;
    .clearfix {
      color: #409eff;
    }
  }
}
.el-form-item {
  margin-bottom: 0px;
  /deep/ .el-form-item__label {
    width: 100px;
    color: #999999;
    line-height: 20px;
  }
  /deep/ .el-form-item__content {
    line-height: 20px;
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.is_fixed {
  position: fixed;
  top: 0;
  left: 30%;
  // margin-left: -250px;
  z-index: 999;
}
</style>